<template>
  <div class="devices-rename">
    <div class="rename-box">
      <div class="title-box">
        <span>请输入新的设备名称</span>
      </div>
      <div class="input-box">
        <input class="input-text" type="text" :placeHolder="oldName" v-model="newName">
      </div>
    </div>
    <div class="btn-box">
      <div class="btn" @touchend="confirmRename">完成</div>
    </div>
    <iframe src="./static/logo.png" style="display:none"></iframe>
  </div>
</template>

<script>
  import { globalMixins } from '../../mixins'

  export default {
    mixins: [globalMixins],

    components: {
    },

    data () {
      return {
        deviceId: '',
        oldName: '灯01',
        newName: ''
      }
    },
    route: {
      data () {
        this.setTitle('重命名')
        this.init()
      }
    },
    ready () {
    },
    methods: {
      init () {
        this.deviceId = this.$route.params.deviceId
      },
      confirmRename () {
        if (this.newName) {
          console.log(this.newName)
        } else {
          this.showMessage('设备名称不能为空！')
        }
      }
    }
  }
</script>

<style lang="stylus">
  @import '../../../shared/assets/style/common'

  .devices-rename
    width 100%
    height 100%
    overflow hidden
    .rename-box
      width 100%
      height 6rem
      padding 0.5rem 0.8rem
      box-sizing border-box
      .title-box
        width 100%
        height 1rem
        line-height 1rem
        color #838383
      .input-box
        width 100%
        background-color #fff
</style>
